<template>
  <div v-if="visible">
    <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" style="margin-bottom: 62px">
      <a-form-item label="员工姓名:">
        {{ permissionsJson.name }}
      </a-form-item>
      <a-form-item label="员工电话:">
        {{ permissionsJson.phone }}
      </a-form-item>
      <a-form-item label="配置权限:">
        <a-select placeholder="请选择" v-model="jurisdiction">
          <a-select-option :value="1">
            客户经理
          </a-select-option>
          <a-select-option :value="2">
            客户专员
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <div class="btnBox">
      <a-button @click="$emit('upDate', 0)" style="margin-right:12px;" v-if="type === 'add'">
        上一步
      </a-button>
      <a-button type="primary" @click="ok" v-if="jurisdiction === 1">
        下一步
      </a-button>
      <a-button type="primary" @click="ok" v-if="jurisdiction === 2">
        完成
      </a-button>
    </div>
  </div>
</template>

<script>
import { postAddJurisdiction, putUpdateJurisdiction } from "../api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: "add"
    },
    permissionsJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      confirmLoading: false,
      jurisdiction: 1
    };
  },
  watch: {
    visible(v) {
      if (v && this.type === "edit") {
        this.jurisdiction = this.permissionsJson.jurisdiction;
      }
    }
  },
  created() {
    if (this.type === "edit") this.jurisdiction = this.permissionsJson.jurisdiction;
  },
  methods: {
    ok() {
      if (this.jurisdiction === 1) {
        this.$emit("upDate", 2, this.jurisdiction);
      } else {
        if (this.type === "edit") {
          this.onPutUpdateJurisdiction();
        } else {
          this.onPostAddJurisdiction();
        }
      }
    },
    async onPutUpdateJurisdiction() {
      try {
        await putUpdateJurisdiction({
          jurisdiction: this.jurisdiction,
          name: this.permissionsJson.name,
          phone: this.permissionsJson.phone,
          id: this.permissionsJson.id
        });
        this.$notification.success({ message: "配置成功" });
        this.$emit("upDate", "success");
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onPostAddJurisdiction(arr) {
      try {
        await postAddJurisdiction({
          jurisdiction: this.jurisdiction,
          name: this.permissionsJson.name,
          phone: this.permissionsJson.phone,
          userId: this.permissionsJson.id
        });
        this.$notification.success({ message: "配置成功" });
        this.$emit("upDate", "success");
      } catch (err) {
        console.log("error log --> ", err);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.btnBox {
  width: 100%;
  height: 56px;
  padding: 12px 12px 0 0;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: flex-end;
}
</style>
